import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Row, message, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { formItemLayout } from '@/utils/utils'
import {
  fetchBankCard,
} from '@/services/distribution/commissionPlace'

const hasSearchBtn = JSON.parse(localStorage.getItem('hasSearchBtn'))

const BackCard = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [data, setData] = useState([])

  useEffect(() => {
    init()
  }, [])

  const init = async params => {
    const res = await fetchBankCard(params)
    if (res.code == 0) {
      setData(res.data)
    } else {
      message.warning(res.msg)
    }
  }

  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return(
      <Col span={8}>
        <Form.Item label={`名称`}>
          {getFieldDecorator(`id`, {})
            (<Input />)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    
  }
  return (
    <PageHeaderWrapper>
      {/* <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} /> */}
      <Form {...formItemLayout}>
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="所属银行">
              {getFieldDecorator('autoWithdrawAmount', {
                initialValue: data.autoWithdrawAmount,
                rules: [
                ],
              })(<Input disabled />)}
            </Form.Item>
          </Col>
        </Row>
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="姓名">
              {getFieldDecorator('autoWithdrawPoundage', {
                initialValue: data.autoWithdrawPoundage,
                rules: [
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
        </Row>
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="银行卡号">
              {getFieldDecorator('auditDoor', {
                initialValue: data.auditDoor,
                rules: [
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
        </Row>
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="身份证号">
              {getFieldDecorator('rateDoor', {
                initialValue: data.rateDoor,
                rules: [
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
        </Row>
        <Row type="flex">
          <Col span={8}>
            <Form.Item label="联系方式">
              {getFieldDecorator('poundage', {
                initialValue: data.poundage,
                rules: [
                ],
              })(<Input />)}
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <RenderButtom click={handleBtn} />
    </PageHeaderWrapper>
    )
}

export default Form.create()(BackCard)
